<template>
  <a-card class="body-container">
    <s-list-form :enable-more="true" @change="
      $nextTick(() => {
        $calcTableHeight()
      })
      ">
      <template #less>
        <s-form-item label="标题" size="list-middle" name="title" :colon="true" :display-title="true"
          :rules="[{ 'max': 255, 'message': '最长为255位' }]">
          <s-input :allow-clear="true" placeholder="请输入标题" v-model="query.title" />
        </s-form-item>
        <s-form-item label="知识库类型" size="list-middle" name="typeNo" :colon="true" :display-title="true">
          <s-select :allow-clear="true" placeholder="请选择业务知识库类型" :show-search="true" code="INFOMATION"
            v-model="query.typeNo" />
        </s-form-item>
        <s-form-item label="发布时间" size="list-middle" name="createDate" :colon="true" :display-title="true">
          <s-date-picker :allow-clear="true" placeholder="请输入发布时间" type="date" value-format="YYYY-MM-DD" :show-time="true"
            v-model="query.createDate" />
        </s-form-item>
        <s-button type="primary" icon="search-outlined" @click="search" style="margin-left: 15px;">查询</s-button>
        <s-button style="margin-left: 8px" icon="stop-outlined" @click="query = {}">重置</s-button>
      </template>
      <!-- <template #more>
      </template> -->
    </s-list-form>
    <s-tool-bar>
      <template #right>
        <s-button v-if="authorize.insert" type="primary" icon="plus-outlined" @click="$refs.add.open()">新增</s-button>
        <a-popconfirm v-if="authorize.deleteMulti" title="确认删除所选数据？" ok-text="是" cancel-text="否" @confirm="deleteMulti">
          <s-button type="danger" icon="delete-outlined">删除</s-button>
        </a-popconfirm>
      </template>
      <!-- <template #right>
        <s-button type="primary" icon="search-outlined" @click="search">查询</s-button>
        <s-button style="margin-left: 8px" icon="stop-outlined" @click="query = {}">重置</s-button>
      </template> -->
    </s-tool-bar>
    <s-table ref="table" bordered :echos="[{
      type: 'INFOMATION',
      name: 'typeNo',
      label: 'text',
      value: 'value',
      url: '/data/dict/item/selectListByGroupId?groupIds=INFOMATION'
    }]" :scroll="{ y: tableHeight }" :columns="columns" url="/modules/infomation/pageList">
      <template #bodyCell="{ column, record ,index}">
        <template v-if="column.key === 'action'">
          <a v-if="authorize.selectOneById" style="margin-right: 8px" @click="$refs.detail.open(record.id)">
            <s-icon type="eye-outlined" />查看
          </a>
          <a v-if="authorize.update" style="margin-right: 8px" @click="$refs.update.open(record.id)">
            <s-icon type="edit-outlined" />编辑
          </a>
          <a-popconfirm v-if="authorize.delete" title="确认删除此条数据？" ok-text="是" cancel-text="否"
            @confirm="deleteById(record.id)">
            <a style="margin-right: 8px">
              <s-icon type="delete-outlined" />删除
            </a>
          </a-popconfirm>
        </template>
        <template v-else-if="column.key === 'xuHao'">
          {{ index + 1 }}
        </template>
      </template>
    </s-table>
    <detail ref="detail" />
    <add ref="add" @success="search" />
    <update ref="update" @success="search" />
  </a-card>
</template>

<script>
import moment from 'moment';
const columns = [
  {
    title: '序号',
    dataIndex: 'serialNumber',
    width: 100,
    'key': 'xuHao',
    sorter: false,
    customRender: (text, record, index) => index + 1
  },
  { 'dataIndex': 'title', 'title': '标题', 'width': 200, 'sorter': true, 'ellipsis': true },
  { 'dataIndex': 'typeNoName', 'title': '知识库类型', 'width': 200, 'sorter': true, 'ellipsis': true },
  { 'dataIndex': 'authType', 'title': '资料权限', 'width': 200, 'sorter': true, 'ellipsis': true },
  { 'dataIndex': 'readNum', 'title': '阅读量', 'width': 200, 'sorter': true, 'ellipsis': true },
  { 'dataIndex': 'sorts', 'title': '排序', 'width': 200, 'sorter': true, 'ellipsis': true },
  { 'dataIndex': 'createByAccount', 'title': '创建人', 'width': 200, 'sorter': false, 'ellipsis': true },
  {
    'dataIndex': 'createDate',
    'title': '发布时间',
    'width': 200,
    'sorter': true,
    'ellipsis': true,
    'customRender': (text, record, index) => moment(text).format('YYYY-MM-DD HH:MM:SS')
  },
  // { 'dataIndex': 'updateByAccount', 'title': '修改人', 'width': 200, 'sorter': true, 'ellipsis': false }, 
  // { 'dataIndex': 'updateDate', 'title': '修改时间', 'width': 200, 'sorter': true, 'ellipsis': true }, 
  { 'title': '操作', 'fixed': 'right', 'key': 'action', 'width': 300 }]
import Detail from './detail/index.vue'
import Add from './add/index.vue'
import Update from './update/index.vue'
export default {
  name: 'QueryList',
  components: { Detail, Add, Update },
  data() {
    return {
      query: {},
      columns: columns
    }
  },
  authorize: '/modules/infomation/permissionList',
  methods: {
    deleteMulti() {
      const keys = this.$refs.table.getSelectedKeys()
      if (keys.length > 0) {
        this.$loading(true)
        this.$api.DELETE('/modules/infomation/deleteMulti', { ids: keys.toString() }).then(() => {
          this.$loading(false)
          this.search()
        }).catch(() => {
          this.$loading(false)
        })
      }
    },
    search() {
      const _this = this
      const query = Object.assign({}, this.query)

      this.$refs.table.search(query)
    },
    deleteById(id) {
      this.$loading(true)
      this.$api.DELETE('/modules/infomation/delete', { id: id }).then(() => {
        this.$loading(false)
        this.search()
      }).catch(() => {
        this.$loading(false)
      })
    }
  }
}
</script>

<style lang="less" scoped></style>